import React, { useEffect, useState, useMemo } from 'react';

function Button({ name, children }) {
    function changeName(name) {
        console.log('11');
        return name + '改变name的方法';
    }

    const otherName = useMemo(() => changeName(name), [name]);
    return (
        <>
            <div>{otherName}</div>
            <div>{children}</div>
        </>

    );
}

export default () => {
    const sonCLick = (e) => {
        e.stopPropagation();
        console.log('son');
    };
    return (
        <>
            <ul onClick={() => console.log('father click')}>
                <li onClick={sonCLick}>1</li>
                <li onClick={sonCLick}>2</li>
                <li onClick={sonCLick}>3</li>
                <li>4</li>
            </ul>
        </>
    );
};